<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <canvas width="400" height="400" id="canvas">
        请升级你的服务器
    </canvas>
    <script>
        // 以及下面这些属性：strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled
        var canvasBox = document.querySelector('#canvas')
        var context = canvasBox.getContext('2d');
        context.fillRect(50, 50, 50, 50);
        context.save(); // 状态存在栈中 
        context.fillStyle = '#f00';
        context.fillRect(110, 110, 50, 50);
        context.restore(); // 拿取栈中最上面的状态
        context.fillRect(220, 220, 50, 50);



    </script>
</body>

</html>